<!--
 * @Author: Neko
 * @Date: 2021-06-23 19:13:26
 * @LastEditTime: 2021-06-25 16:52:35
 * @LastEditors: Neko
-->
<template>
  <view class="tabs__container">
    <view class="tabs__tab-container">
      <view
        class="tabs__left-arrow arrow"
        :style="{
          opacity: current === 0 ? 0 : 1
        }"
        @click="onClickLeftBtn"
      >
        <u-icon name="arrow-left" size="23" color="#7A7A7A" />
      </view>

      <scroll-view
        class="tabs__scroll"
        :scroll-x="true"
        :scroll-left="scrollLeft"
        @scroll="onScroll"
      >
        <view
          class="tabs__item"
        >
          <view
            v-for="(item, index) in list"
            :key="item.specificationMainName"
            class="item"
            :class="{
              active: index === current
            }"
            @click="onClickItem(index)"
          >
            {{ item.specificationMainName }}
          </view>

          <view
            class="tabs__active-bar"
            :style="{
              left: activeBar.left,
              width: activeBar.width
            }"
          />
        </view>
      </scroll-view>
      <view
        class="tabs__right-arrow arrow"
        :style="{
          opacity: current === list.length - 1 ? 0 : 1
        }"
        @click="onClickRightBtn"
      >
        <u-icon name="arrow-right" size="23" color="#7A7A7A" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => ([])
    },

    currentTab: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      current: 0,

      // list: [
      //   { name: '泰' },
      //   { name: '日本' },
      //   { name: '葡萄牙' },
      //   { name: '澳大利亚' },
      //   { name: '列支敦士登' },
      //   { name: '捷克斯洛伐克' },
      //   { name: '法属留尼汪群岛' },
      //   { name: '英属百慕大群岛' },
      //   { name: '東京オリンピック２０２０' },
      //   { name: '大不列颠和北爱尔兰联合王国' },
      //   { name: '東京都議会選挙小池百合子氏二回当選' }
      // ],

      scrollLeft: 0,
      oldScrollLeft: {
        scrollLeft: 0
      },

      activeBar: {
        width: '240rpx',
        left: '0rpx'
      },

      pixelRatio: 1
    }
  },

  watch: {
    currentTab() {
      this.current = this.currentTab
      this.onClickItem(this.current)
    }
  },

  mounted() {
    const _ = this
    this.current = this.currentTab
    this.onClickItem(this.current)
    uni.getSystemInfo({
      success(res) {
        _.pixelRatio = res.pixelRatio
      }
    })
  },

  methods: {
    onScroll(e) {
      this.oldScrollLeft.scrollLeft = e.detail.scrollLeft
    },

    onClickItem(index) {
      const selector = uni.createSelectorQuery()
      const allItem = selector.selectAll('.item')
      allItem.boundingClientRect((res) => {
        const width = res.slice(0, index + 1).reduce((prev, current) => prev + current.width, 0)
        const now = res[index]

        this.scrollLeft = this.oldScrollLeft.scrollLeft
        this.$nextTick(() => {
          this.scrollLeft = width - 312 + 20
        })
        
        this.activeBar.width = (now.width * 2 + 20) + 'rpx'
        this.activeBar.left = (120 * index) * 2 + 'rpx'
      }).exec()
      
      this.current = index

      this.$emit('click', {
        item: this.list[index],
        index: index
      })
    },

    onClickLeftBtn() {
      if (this.current === 0) return

      this.current -= 1
      this.onClickItem(this.current)
    },

    onClickRightBtn() {
      if (this.current === this.list.length - 1) return
      
      this.current += 1
      this.onClickItem(this.current)
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs__container {
  width: 100%;
  height: 90rpx;
  padding: 0rpx 0;
  border-bottom: 1px solid #E0E0E0;

  .tabs__tab-container {
    display: flex;
    // padding: 0 40rpx;
    
    .arrow {
      flex-shrink: 0;
      // position: absolute;
      margin: 14rpx 0;
      width: 63rpx;
      line-height: 62rpx;
      background: #fff;
    }

    .tabs__left-arrow {
      left: 0;
      padding-right: 13rpx;
      border-right: 1rpx solid #E5E5E5;
      text-align: right;
    }

    .tabs__right-arrow {
      right: 0;
      padding-left: 13rpx;
      border-left: 1rpx solid #E5E5E5;
      text-align: left;
    }

    .tabs__scroll {
      width: 624rpx;
    }
  }

  

  .tabs__item {
    position: relative;
    display: flex;
    align-items: center;
    height: 90rpx;
    // padding: 14rpx 20rpx;
    // line-height: 90rpx;
    // overflow: auto;

    .item {
      min-width: 240rpx;
      max-width: 359rpx;
      padding: 0 20rpx;
      text-align: center;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;

      &.active {
        
        font-size: 28rpx;
        color: #0049AC;
      }
    }
  }

  .tabs__active-bar {
    position: absolute;
    width: 240rpx;
    height: 4rpx;
    background: #0049AC;
    bottom: 0;
  }
}
</style>

<style lang="scss">
/deep/ .tabs__scroll .uni-scroll-view .uni-scroll-view {
  overflow: auto hidden!important;
}
</style>